<template>
    <div class="community-course">
        <!-- 顶部导航部分 -->
        <el-row :gutter="20" class="top-nav">
            <el-col :span="24">
                <el-button-group>
                    <el-button type="primary">社团课</el-button>
                    <el-button>自定义课程</el-button>
                    <el-button>学校共享课程</el-button>
                </el-button-group>
                <el-input
                    placeholder="输入关键词搜索课程"
                    prefix-icon="el-icon-search"
                    v-model="searchQuery"
                    class="search-box"
                />
                <el-button type="primary" icon="el-icon-plus" class="create-button">创建课程</el-button>
                <el-select v-model="status" placeholder="开通状态" class="status-select">
                    <el-option label="全部" value="all"></el-option>
                    <!-- 其他选项 -->
                </el-select>
            </el-col>
        </el-row>

        <!-- 选项卡部分 -->
        <el-tabs v-model="activeTab" class="tabs">
            <el-tab-pane label="全部" name="all"></el-tab-pane>
            <el-tab-pane label="基础系列" name="basic"></el-tab-pane>
            <!-- 其他选项卡 -->
        </el-tabs>

        <!-- 课程卡片部分 -->
        <el-row :gutter="20" class="course-list">
            <el-col :span="6">
                <el-card shadow="hover">
                    <img src="path/to/course-image.jpg" class="course-image" />
                    <div class="course-info">
                        <h3>AI启蒙之旅</h3>
                        <span class="status-label">已开通</span>
                    </div>
                </el-card>
            </el-col>
            <!-- 其他课程卡片 -->
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchQuery: '',
            status: 'all',
            activeTab: 'all'
        };
    }
};
</script>

<style scoped>
.community-course {
    padding: 20px;
}
.top-nav {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.search-box {
    width: 300px;
    margin-left: 20px;
}
.create-button {
    float: right;
}
.status-select {
    margin-left: 20px;
}
.tabs {
    margin-bottom: 20px;
}
.course-list {
    display: flex;
    flex-wrap: wrap;
}
.course-image {
    width: 100%;
    height: auto;
}
.course-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.status-label {
    color: green;
}
</style>
